<script setup>
import { ref, onMounted } from 'vue'
import { autoHover } from '@/utils/autoHover.js'
import * as echarts from 'echarts'
import { GetDates7 } from '@/utils/GetDate.js'

const chartRef = ref()
let Chart = {}

const data = [45, 43, 43, 13, 23, 23, 43]
let allData = []

//加载数据
onMounted(() => {
    initChart()
    getData()
    screenAdapter()
    window.addEventListener('resize', screenAdapter)
})

//初始化图表
const initChart = () => {
    Chart = echarts.init(chartRef.value)
    const initOption = {
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.8)',
            borderColor: 'rgba(50,50,50,0)',
            formatter: formatterCN
        },
        grid: {
            right: 10,
            left: 30,
            bottom: 20,
            top: 20
        },
        legend: {
            left: 'right'
        },
        xAxis: {
            type: 'category',
            data: GetDates7,
            splitLine: {
                show: false
            },
            axisLabel: {
                show: true,
                color: 'rgba(255,255,255,.7)'
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#56769C'
                }
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            min: 0,
            max: (value) => {
                return Math.ceil(value.max / 100) * 100
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: true,
                color: 'rgba(255,255,255,.7)'
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#56769C' //刻度线的颜色
                }
            }
        },
        series: [
            {
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#FFDC68' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#2A2B2B' // 100% 处的颜色
                            }
                        ],
                        globalCoord: false // 缺省为 false
                    }
                }
                // data: data.value,
            },
            {
                type: 'line',
                smooth: true,
                barWidth: 2,
                itemStyle: {
                    color: '#FFDC68'
                }

                // data: data.value,
            }
        ]
    }
    Chart.setOption(initOption)

    // 参数分别为：容器，配置，轮播数量，轮播间隔时间
    autoHover(Chart, 4, 3000)
}

//获取数据
const getData = () => {
    updateChart()
}

//屏幕适配
const screenAdapter = () => {
    Chart.resize()
}

// 更新数据 显示图标
const updateChart = () => {
    Chart.setOption({
        series: [
            {
                data: data
            },
            {
                data: data
            }
        ]
    })
}

const formatterCN = (params) => {
    return `<div style="background-color:transparent;">
            <div style="font-size:18px;color:#fff;">${params[0].axisValue}</div>
            <div style="font-size:16px;color:#fff;margin:14px 0 8px 0">产能趋势</div>
            <div style="font-size:16px;color:#fff;"> <span style="font-size:24px;color:#FFEC5A;">${params[0].data}</span> 件</div>
        </div>`
}
</script>

<template>
    <div class="com-chart-content chart" ref="chartRef"></div>
</template>

<style scoped lang="scss">
.chart {
    height: 180px;
    width: 280px;
}
</style>
